<script src="@/js/paipan/liuyao.js"></script>


<template>
    <div class="vue">
        <div class="margins">

            <div class="nodata" v-show="!isData">

                <video ref="videoRef" autoplay loop :muted="true">
                    <source src="@/assets/img/paipan/loading.mp4" type="video/mp4">
                </video>

                <div class="option">

                    <div class="paipan">
                        <Button type="primary" class="button" @click="paiPanMethod">六爻 - 开始排盘</Button>
                    </div>

                    <div class="xy">
                        <div class="name">
                            <Input size="small" v-model="options.name" placeholder="请输入姓名" maxlength="20"
                                show-word-limit />
                        </div>
                        <div class="occupy">
                            <Input size="small" v-model="options.occupy" placeholder="请输入占事" maxlength="20"
                                show-word-limit />
                        </div>
                        <div class="date">
                            <el-date-picker size="small" :clearable="false" v-model="options.date" type="datetime"
                                format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期" :editable="false"
                                style="width:170px;" />
                            <div class="leapmonth">
                                <el-radio-group size="small" v-model="options.leapMonth"
                                    v-for="item in leapMonthOptions" :key="item">
                                    <el-radio-button :label="item.label" :value="item.value" />
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="datetype">
                            <el-radio-group size="small" v-model="options.dateType" v-for="item in dateTypeOptions"
                                :key="item">
                                <el-radio-button :label="item.label" :value="item.value" />
                            </el-radio-group>
                            <div class="sex">
                                <el-radio-group size="small" v-model="options.sex" v-for="item in sexOptions"
                                    :key="item">
                                    <el-radio-button :label="item.label" :value="item.value" />
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="other">
                            <span class="title">排盘模式</span>
                            <Select size="small" v-model="options.qiGuaMode" class="select">
                                <Option v-for="item in qiGuaModeOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div v-show="options.qiGuaMode === 2" class="boeder1">
                            <div class="other">
                                <span class="title">上爻</span>
                                <Select size="small" v-model="options.liuYao" class="select">
                                    <Option v-for="item in yaoOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                            <div class="other">
                                <span class="title">五爻</span>
                                <Select size="small" v-model="options.wuYao" class="select">
                                    <Option v-for="item in yaoOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                            <div class="other">
                                <span class="title">四爻</span>
                                <Select size="small" v-model="options.siYao" class="select">
                                    <Option v-for="item in yaoOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                            <div class="other">
                                <span class="title">三爻</span>
                                <Select size="small" v-model="options.sanYao" class="select">
                                    <Option v-for="item in yaoOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                            <div class="other">
                                <span class="title">二爻</span>
                                <Select size="small" v-model="options.erYao" class="select">
                                    <Option v-for="item in yaoOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                            <div class="other">
                                <span class="title">初爻</span>
                                <Select size="small" v-model="options.yiYao" class="select">
                                    <Option v-for="item in yaoOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                        </div>
                        <div class="other">
                            <span class="title">年柱排法</span>
                            <Select size="small" v-model="options.yearGanZhiSet" class="select">
                                <Option v-for="item in yearGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div class="other">
                            <span class="title">月柱排法</span>
                            <Select size="small" v-model="options.monthGanZhiSet" class="select">
                                <Option v-for="item in monthGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div class="other">
                            <span class="title">日柱排法</span>
                            <Select size="small" v-model="options.dayGanZhiSet" class="select">
                                <Option v-for="item in dayGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div class="other">
                            <span class="title">时柱排法</span>
                            <Select size="small" v-model="options.hourGanZhiSet" class="select">
                                <Option v-for="item in hourGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                    </div>

                </div>

            </div>

            <div class="yesdata" v-if="isData">

                <div class="option">
                    <Button type="primary" class="button" @click="fanHuiPaiPanMethod">返回排盘</Button>
                    <div class="float-right">
                        <Button type="success" class="button2" @click="jiChuMethod">
                            <b v-if="dataPage === 1">基础信息</b>
                            <span v-else>基础信息</span>
                        </Button>
                        <Button type="success" class="button2" @click="gengDuoMethod">
                            <b v-if="dataPage === 2">更多信息</b>
                            <span v-else>更多信息</span>
                        </Button>
                    </div>
                </div>

                <div class="data">

                    <div class="hrader">
                        <div class="name">
                            <Ellipsis :text="data.name" :length="3" tooltip />
                        </div>
                        <div class="date">
                            <span class="other">（{{ data.sex + '，' + data.zao }}）</span>
                            <span class="item">公历{{ data.solarStr }}</span>
                            <span class="item">农历{{ data.lunarStr }}</span>
                            <span class="item">{{ data.week }}</span>
                            <span class="item">{{ data.season }}</span>
                            <span class="item" v-if="'' !== data.wuBuYuShi">
                                <Tag color="error">{{ data.wuBuYuShi }}</Tag>
                            </span>
                        </div>
                        <div class="shengxiao">
                            {{ data.shengXiao }}
                        </div>
                    </div>

                    <div class="border">

                        <div class="jichu" v-show="dataPage === 1">

                            <div class="go bgi1">
                                <div class="item">
                                    <div class="title">驿马</div>
                                    <div class="content">{{ data.yiMa }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">天马</div>
                                    <div class="content">{{ data.tianMa }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">禄马</div>
                                    <div class="content">{{ data.luMa }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">天喜</div>
                                    <div class="content">{{ data.tianXi }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">天医</div>
                                    <div class="content">{{ data.tianYi }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">皇恩</div>
                                    <div class="content">{{ data.huangEn }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">灾煞</div>
                                    <div class="content">{{ data.zaiSha }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">劫煞</div>
                                    <div class="content">{{ data.jieSha }}</div>
                                </div>
                            </div>

                            <div class="go bgi2">
                                <div class="item">
                                    <div class="title">文昌</div>
                                    <div class="content">{{ data.wenChang }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">华盖</div>
                                    <div class="content">{{ data.huaGai }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">谋星</div>
                                    <div class="content">{{ data.mouXing }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">将星</div>
                                    <div class="content">{{ data.jiangXing }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">天乙</div>
                                    <div class="content">{{ data.tianYiGuiRen }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">天德</div>
                                    <div class="content">{{ data.tianDeGuiRen }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">月德</div>
                                    <div class="content">{{ data.yueDeGuiRen }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">太极</div>
                                    <div class="content">{{ data.taiJiGuiRen }}</div>
                                </div>
                            </div>

                            <div class="go bgi1">
                                <div class="item">
                                    <div class="title">福星</div>
                                    <div class="content">{{ data.fuXingGuiRen }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">文昌</div>
                                    <div class="content">{{ data.wenChang }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">咸池</div>
                                    <div class="content">{{ data.xianChi }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">符印</div>
                                    <div class="content">{{ data.tangFuGuoYin }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">阳刃</div>
                                    <div class="content">{{ data.yangRen }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">飞刃</div>
                                    <div class="content">{{ data.feiRen }}</div>
                                </div>
                                <div class="item">
                                    <div class="title">天元禄</div>
                                    <div class="content">{{ data.tianYuanLu }}</div>
                                </div>
                                <div class="item">
                                    <div class="title"></div>
                                    <div class="content"></div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="row-left">

                                    <div class="title">
                                        <Tag color="default" class="name">本卦：{{ data.benGua }}</Tag>
                                        <Tag color="blue">卦身：{{ data.benGuaGuaShen }}</Tag>
                                        <Tag color="cyan">{{ data.benGuaType }}</Tag>
                                    </div>

                                    <div class="tip">
                                        <span class="yaoming">爻名</span>
                                        <span class="guaxiang">卦象</span>
                                        <span class="shiying">世应</span>
                                        <span class="liuqin">六亲</span>
                                        <span class="ganzhi">干支</span>
                                        <span class="wuxing">五行</span>
                                        <span class="liushen">六神</span>
                                        <span class="yaoci">爻辞</span>
                                    </div>

                                    <div class="main">
                                        <div class="yaoming" v-if="data.benGuaLiuYaoName">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.benGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="guaxiang" v-if="data.benGuaAs">
                                            <div>{{ data.benGuaAs }}</div>
                                        </div>
                                        <div class="mark" v-if="data.liuYaoYaoXiangMark">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.liuYaoYaoXiangMark[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="shiying" v-if="data.benGuaLiuYaoShiYing">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.benGuaLiuYaoShiYing[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="liuqin" v-if="data.benGuaLiuYaoLiuQin">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.benGuaLiuYaoLiuQin[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="ganzhi" v-if="data.benGuaLiuYaoGanZhi">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.benGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(0, 1))"></span>
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.benGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(1, 2))"></span>(<span>{{
                                                        data.benGuaLiuYaoGanZhiNaYin[liuYaoIndex[index - 1]] }} </span>)
                                            </div>
                                        </div>
                                        <div class="wuxing" v-if="data.benGuaLiuYaoWuXing">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="wuXingGaoLiangMethod(data.benGuaLiuYaoWuXing[liuYaoIndex[index - 1]])"></span>
                                            </div>
                                        </div>
                                        <div class="liushen" v-if="data.benGuaLiuYaoLiuShen">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.benGuaLiuYaoLiuShen[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="yaoci" v-if="data.benGuaLiuYaoYaoCi">
                                            <div v-for="index in 6" :key="index">
                                                <b>{{ data.benGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="row-right">

                                    <div class="title">
                                        <Tag color="default" class="name">伏卦：{{ data.fuGua }}</Tag>
                                        <Tag color="blue">卦身：{{ data.fuGuaGuaShen }}</Tag>
                                        <Tag color="cyan">{{ data.fuGuaType }}</Tag>
                                    </div>

                                    <div class="tip">
                                        <span class="yaoming">爻名</span>
                                        <span class="guaxiang">卦象</span>
                                        <span class="shiying">世应</span>
                                        <span class="fushen">伏神</span>
                                        <span class="liuqin">六亲</span>
                                        <span class="ganzhi">干支</span>
                                        <span class="wuxing">五行</span>
                                        <span class="liushen">六神</span>
                                        <span class="yaoci">爻辞</span>
                                    </div>

                                    <div class="main">
                                        <div class="yaoming" v-if="data.fuGuaLiuYaoName">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.fuGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="guaxiang" v-if="data.fuGuaAs">
                                            <div>{{ data.fuGuaAs }}</div>
                                        </div>
                                        <div class="mark">
                                            <div v-for="index in 6" :key="index" style="width:8px;"></div>
                                        </div>
                                        <div class="shiying" v-if="data.fuGuaLiuYaoShiYing">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.fuGuaLiuYaoShiYing[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="fushen" v-if="data.fuGuaLiuYaoFuShen">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.fuGuaLiuYaoFuShen[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="liuqin" v-if="data.fuGuaLiuYaoLiuQin">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.fuGuaLiuYaoLiuQin[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="ganzhi" v-if="data.fuGuaLiuYaoGanZhi">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.fuGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(0, 1))"></span>
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.fuGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(1, 2))"></span>(<span>{{
                                                        data.fuGuaLiuYaoGanZhiNaYin[liuYaoIndex[index - 1]] }} </span>)
                                            </div>
                                        </div>
                                        <div class="wuxing" v-if="data.fuGuaLiuYaoWuXing">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="wuXingGaoLiangMethod(data.fuGuaLiuYaoWuXing[liuYaoIndex[index - 1]])"></span>
                                            </div>
                                        </div>
                                        <div class="liushen" v-if="data.fuGuaLiuYaoLiuShen">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.fuGuaLiuYaoLiuShen[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="yaoci" v-if="data.fuGuaLiuYaoYaoCi" style="margin-left:350px;">
                                            <div v-for="index in 6" :key="index">
                                                <b>{{ data.fuGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                            <div class="row">

                                <div class="row-left">

                                    <div class="title">
                                        <Tag color="default" class="name">变卦：{{ data.bianGua }}</Tag>
                                        <Tag color="blue">卦身：{{ data.bianGuaGuaShen }}</Tag>
                                        <Tag color="cyan">{{ data.bianGuaType }}</Tag>
                                    </div>

                                    <div class="tip">
                                        <span class="yaoming">爻名</span>
                                        <span class="guaxiang">卦象</span>
                                        <span class="shiying">世应</span>
                                        <span class="liuqin">六亲</span>
                                        <span class="ganzhi">干支</span>
                                        <span class="wuxing">五行</span>
                                        <span class="liushen">六神</span>
                                        <span class="yaoci">爻辞</span>
                                    </div>

                                    <div class="main">
                                        <div class="yaoming" v-if="data.bianGuaLiuYaoName">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.bianGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="guaxiang" v-if="data.bianGuaAs">
                                            <div>{{ data.bianGuaAs }}</div>
                                        </div>
                                        <div class="mark">
                                            <div v-for="index in 6" :key="index" style="width:8px;"></div>
                                        </div>
                                        <div class="shiying" v-if="data.bianGuaLiuYaoShiYing">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.bianGuaLiuYaoShiYing[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="liuqin" v-if="data.bianGuaLiuYaoLiuQin">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.bianGuaLiuYaoLiuQin[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="ganzhi" v-if="data.bianGuaLiuYaoGanZhi">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.bianGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(0, 1))"></span>
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.bianGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(1, 2))"></span>(<span>{{
                                                        data.bianGuaLiuYaoGanZhiNaYin[liuYaoIndex[index - 1]] }} </span>)
                                            </div>
                                        </div>
                                        <div class="wuxing" v-if="data.bianGuaLiuYaoWuXing">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="wuXingGaoLiangMethod(data.bianGuaLiuYaoWuXing[liuYaoIndex[index - 1]])"></span>
                                            </div>
                                        </div>
                                        <div class="liushen" v-if="data.bianGuaLiuYaoLiuShen">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.bianGuaLiuYaoLiuShen[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="yaoci" v-if="data.bianGuaLiuYaoYaoCi">
                                            <div v-for="index in 6" :key="index">
                                                <b>{{ data.bianGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="row-right">

                                    <div class="title">
                                        <Tag color="default" class="name">互卦：{{ data.huGua }}</Tag>
                                        <Tag color="blue">卦身：{{ data.huGuaGuaShen }}</Tag>
                                        <Tag color="cyan">{{ data.huGuaType }}</Tag>
                                    </div>

                                    <div class="tip">
                                        <span class="yaoming">爻名</span>
                                        <span class="guaxiang">卦象</span>
                                        <span class="shiying">世应</span>
                                        <span class="liuqin">六亲</span>
                                        <span class="ganzhi">干支</span>
                                        <span class="wuxing">五行</span>
                                        <span class="liushen">六神</span>
                                        <span class="yaoci">爻辞</span>
                                    </div>

                                    <div class="main">
                                        <div class="yaoming" v-if="data.huGuaLiuYaoName">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.huGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="guaxiang" v-if="data.huGuaAs">
                                            <div>{{ data.huGuaAs }}</div>
                                        </div>
                                        <div class="mark">
                                            <div v-for="index in 6" :key="index" style="width:8px;"></div>
                                        </div>
                                        <div class="shiying" v-if="data.huGuaLiuYaoShiYing">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.huGuaLiuYaoShiYing[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="liuqin" v-if="data.huGuaLiuYaoLiuQin">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.huGuaLiuYaoLiuQin[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="ganzhi" v-if="data.huGuaLiuYaoGanZhi">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.huGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(0, 1))"></span>
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.huGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(1, 2))"></span>(<span>{{
                                                        data.huGuaLiuYaoGanZhiNaYin[liuYaoIndex[index - 1]] }} </span>)
                                            </div>
                                        </div>
                                        <div class="wuxing" v-if="data.huGuaLiuYaoWuXing">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="wuXingGaoLiangMethod(data.huGuaLiuYaoWuXing[liuYaoIndex[index - 1]])"></span>
                                            </div>
                                        </div>
                                        <div class="liushen" v-if="data.huGuaLiuYaoLiuShen">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.huGuaLiuYaoLiuShen[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="yaoci" v-if="data.huGuaLiuYaoYaoCi">
                                            <div v-for="index in 6" :key="index">
                                                <b>{{ data.huGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                            <div class="row">

                                <div class="row-left">

                                    <div class="title">
                                        <Tag color="default" class="name">错卦：{{ data.cuoGua }}</Tag>
                                        <Tag color="blue">卦身：{{ data.cuoGuaGuaShen }}</Tag>
                                        <Tag color="cyan">{{ data.cuoGuaType }}</Tag>
                                    </div>

                                    <div class="tip">
                                        <span class="yaoming">爻名</span>
                                        <span class="guaxiang">卦象</span>
                                        <span class="shiying">世应</span>
                                        <span class="liuqin">六亲</span>
                                        <span class="ganzhi">干支</span>
                                        <span class="wuxing">五行</span>
                                        <span class="liushen">六神</span>
                                        <span class="yaoci">爻辞</span>
                                    </div>

                                    <div class="main">
                                        <div class="yaoming" v-if="data.cuoGuaLiuYaoName">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.cuoGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="guaxiang" v-if="data.cuoGuaAs">
                                            <div>{{ data.cuoGuaAs }}</div>
                                        </div>
                                        <div class="mark">
                                            <div v-for="index in 6" :key="index" style="width:8px;"></div>
                                        </div>
                                        <div class="shiying" v-if="data.cuoGuaLiuYaoShiYing">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.cuoGuaLiuYaoShiYing[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="liuqin" v-if="data.cuoGuaLiuYaoLiuQin">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.cuoGuaLiuYaoLiuQin[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="ganzhi" v-if="data.cuoGuaLiuYaoGanZhi">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.cuoGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(0, 1))"></span>
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.cuoGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(1, 2))"></span>(<span>{{
                                                        data.cuoGuaLiuYaoGanZhiNaYin[liuYaoIndex[index - 1]] }} </span>)
                                            </div>
                                        </div>
                                        <div class="wuxing" v-if="data.cuoGuaLiuYaoWuXing">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="wuXingGaoLiangMethod(data.cuoGuaLiuYaoWuXing[liuYaoIndex[index - 1]])"></span>
                                            </div>
                                        </div>
                                        <div class="liushen" v-if="data.cuoGuaLiuYaoLiuShen">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.cuoGuaLiuYaoLiuShen[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="yaoci" v-if="data.cuoGuaLiuYaoYaoCi">
                                            <div v-for="index in 6" :key="index">
                                                <b>{{ data.cuoGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="row-right">

                                    <div class="title">
                                        <Tag color="default" class="name">综卦：{{ data.zongGua }}</Tag>
                                        <Tag color="blue">卦身：{{ data.zongGuaGuaShen }}</Tag>
                                        <Tag color="cyan">{{ data.zongGuaType }}</Tag>
                                    </div>

                                    <div class="tip">
                                        <span class="yaoming">爻名</span>
                                        <span class="guaxiang">卦象</span>
                                        <span class="shiying">世应</span>
                                        <span class="liuqin">六亲</span>
                                        <span class="ganzhi">干支</span>
                                        <span class="wuxing">五行</span>
                                        <span class="liushen">六神</span>
                                        <span class="yaoci">爻辞</span>
                                    </div>

                                    <div class="main">
                                        <div class="yaoming" v-if="data.zongGuaLiuYaoName">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.zongGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="guaxiang" v-if="data.zongGuaAs">
                                            <div>{{ data.zongGuaAs }}</div>
                                        </div>
                                        <div class="mark">
                                            <div v-for="index in 6" :key="index" style="width:8px;"></div>
                                        </div>
                                        <div class="shiying" v-if="data.zongGuaLiuYaoShiYing">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.zongGuaLiuYaoShiYing[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="liuqin" v-if="data.zongGuaLiuYaoLiuQin">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.zongGuaLiuYaoLiuQin[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="ganzhi" v-if="data.zongGuaLiuYaoGanZhi">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.zongGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(0, 1))"></span>
                                                <span
                                                    v-html="ganZhiGaoLiangMethod(data.zongGuaLiuYaoGanZhi[liuYaoIndex[index - 1]].substring(1, 2))"></span>(<span>{{
                                                        data.zongGuaLiuYaoGanZhiNaYin[liuYaoIndex[index - 1]] }} </span>)
                                            </div>
                                        </div>
                                        <div class="wuxing" v-if="data.zongGuaLiuYaoWuXing">
                                            <div v-for="index in 6" :key="index">
                                                <span
                                                    v-html="wuXingGaoLiangMethod(data.zongGuaLiuYaoWuXing[liuYaoIndex[index - 1]])"></span>
                                            </div>
                                        </div>
                                        <div class="liushen" v-if="data.zongGuaLiuYaoLiuShen">
                                            <div v-for="index in 6" :key="index">
                                                {{ data.zongGuaLiuYaoLiuShen[liuYaoIndex[index - 1]] }}
                                            </div>
                                        </div>
                                        <div class="yaoci" v-if="data.zongGuaLiuYaoYaoCi">
                                            <div v-for="index in 6" :key="index">
                                                <b>{{ data.zongGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="gengduo" v-if="dataPage === 2">

                            <img class="img" src="@/assets/img/paipan/qidai.png" />

                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</template>


<style scoped lang="scss" src="@/css/paipan/liuyao.scss"></style>
